﻿import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts

Item {
    id: control

    height: 30
    implicitWidth: 300

    // var
    property int textSize: 15
    property string separator: "/"
    property var items: []
    property int spacing: 5
    property bool disable: false
    // signal
    signal clickItem(var model)
    // slot
    onItemsChanged: {
        list_model.clear()
        list_model.append(items)
    }

    ListModel {
        id: list_model
    }
    ListView {
        id: list_view
        width: parent.width
        height: 30
        orientation: ListView.Horizontal
        model: list_model
        clip: true
        spacing: control.spacing
        // boundsBehavior: ListView.StopAtBounds
        remove: Transition {
            NumberAnimation {
                properties: "opacity"
                from: 1
                to: 0
                duration: 83
            }
        }
        add: Transition {
            NumberAnimation {
                properties: "opacity"
                from: 0
                to: 1
                duration: 83
            }
        }
        delegate: Item {
            height: item_layout.height
            width:  item_layout.width
            RowLayout {
                id: item_layout
                spacing: list_view.spacing
                height:  list_view.height
                Text {
                    text: model.title
                    renderType: Text.CurveRendering
                    Layout.alignment: Qt.AlignVCenter
                    color: {
                        if (mousearea__item.pressed) {
                            return Qt.rgba(134/255, 134/255, 134/255, 1)
                        }
                        if (mousearea__item.containsMouse) {
                            return Qt.rgba(92/255, 92/255, 92/255, 1)
                        }
                        return Qt.rgba(26/255, 26/255, 26/255, 1)
                    }
                    MouseArea {
                        id: mousearea__item
                        enabled: !control.disable
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: {
                            control.clickItem(model)
                        }
                    }
                }
                Text {
                    text: control.separator
                    font.pixelSize: control.textSize
                    visible: list_view.count - 1 !== index
                    Layout.alignment: Qt.AlignVCenter
                }
            }
        }
    }

    function remove(index, count) {
        // console.log("index=" + index + " count=" + count)
        list_model.remove(index, count)
        items = items.slice(0, index)
    }
    function count() {
        return list_model.count
    }
}
